<template>
  <!--头部搜索-->
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="编号">
      <el-input v-model="formData.id" placeholder="请输入商品ID" clearable />
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="formData.name" placeholder="请输入商品名称" clearable />
    </el-form-item>
    <el-form-item label="批量查询">
      <el-input v-model="formData.ids" placeholder="请输入商品ID并且以,分割" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <!-- 商品列表展示-->
  <el-table :data="productData" style="width: 100%">
    <el-table-column fixed prop="id" label="编号" width="150" />
    <el-table-column prop="pname" label="商品名称" width="160" />
    <el-table-column prop="imgurl" label="商品图片" width="120">
      <template #default="scope">
        <img :src="scope.row.imgurl" alt="" width="60" height="60">
      </template>

    </el-table-column>
    <el-table-column prop="newprice" label="商品价格" width="120" />
    <el-table-column prop="szie" label="商品尺寸" width="160" />
    <el-table-column prop="categoryId" label="商品父目录ID" width="120" />
    <el-table-column prop="color" label="颜色" width="120" />
    <el-table-column fixed="right" label="操作" width="260">
      <template #default>
        <el-button type="danger" size="small" @click="handleClick">下线</el-button>
        <el-button type="danger" size="small" @click="handleClick">上线</el-button>
        <el-button type="danger" size="small" @click="handleClick">发货</el-button>
        <el-button type="primary" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="currentPage1" :page-size="100" :small="small" :disabled="disabled"
    :background="background" layout="total, prev, pager, next" :total="1000" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// reactive 也是响应式处理 处理的数据是复杂类型 也就是纯对象
const formData = reactive({
  name: '',
  id: 0,
  ids: [],
})

const productData = ref([
  {
    id: '101',
    name: '鲁花花生油5L桶装',
    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/250827/1/29205/96433/67bfdb5aF35d12293/4f0d061bd57e4be0.jpg',
    price: '3899.00',
    seq: '1',
    categoryId: '88',
    updateByName: '萧炎',
  },
  {
    id: '102',
    name: 'oppoFind X7手机',
    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/291342/36/10031/60494/683662a5F87d9457f/8890815489ec57be.jpg',
    price: '3899.00',
    seq: '1',
    categoryId: '89',
    updateByName: '美杜莎',
  },
  {
    id: '103',
    name: '华强北蓝牙耳机适配苹果15真无线',
    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/302243/8/1751/45214/6815c019Fc1efb00d/84903ba34819ef7d.jpg',
    price: '3899.00',
    seq: '1',
    categoryId: '106',
    updateByName: '美杜莎',
  }
])

import axios from 'axios'

onMounted(() => { 
  axios.get('http://localhost:8080/api/product').then(res => { 
    console.log(res.data);
    productData.value=res.data
  })
})


const onSubmit = () => {
  console.log('submit!')
  const fromID = formData.id
  const fromName = formData.name


  productData.value = fromID ? productData.value.filter(item => item.id === fromID) : productData.value
  productData.value = fromName ? productData.value.filter(item => item.name === fromName) : productData.value
  console.log(productData.value);
  
}

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>
<style scoped></style>